<template>
    <div>
        <!--查询面板-->
        <el-card class="box-card">
            <el-input v-model="queryData.agentName" placeholder="账号" size="small"></el-input>

            <el-button type="primary" size="small" @click="queryDataHandle(1, 10)">查询</el-button>
<!--            <el-divider direction="vertical"></el-divider>-->
            <el-button plain size="small" @click="resetQuery">重置</el-button>
        </el-card>

        <div class="interspaceH"></div>

        <!--列表面板-->
        <el-card class="box-card">
            <el-table @selection-change="tableRowChange" :data="dataSource"
                      :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="userName" label="账号" :formatter="formatter"></el-table-column>
                <el-table-column prop="userNickname" label="账号名称" :formatter="formatter"></el-table-column>
                <el-table-column prop="deptName" label="部门" :formatter="formatter"></el-table-column>
                <el-table-column prop="rolesName" label="分配的角色" :formatter="formatter"></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="allotUserHandle(scope.row)" type="text" size="small">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="interspaceH"></div>

            <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                           @current-change="queryDataHandle($event,pagePagination.pageSize)"
                           :current-page="pagePagination.currentPage"
                           :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="dataSource.length">
            </el-pagination>
        </el-card>

        <!--    分配角色面板    -->
        <el-dialog title="选择角色" :visible.sync="roleVisible" width="60%" :close-on-click-modal="false" :destroy-on-close="true">

            <ListSelect @getData="getRoleData" :listFields="roleListFields" :dataSource="roleList" type="filter"/>

            <span slot="footer" class="dialog-footer">
                <el-button @click="roleVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ListSelect from "@/platform_views/components/list_select/list_select"

//查询表单
const initQueryData = {
    agentName: '',//名称
}

export default {
    components: {ListSelect},
    data() {
        return {
            //列表选中的下标
            multipleSelection: [],
            //分配角色
            roleVisible: false,
            //下拉列表种类
            dictionary: {
            },
            //字段转换
            fieldType: {
                createTime: "datetime"
            },
            //查询表单
            queryData: {...initQueryData},
            //列表数据
            dataSource: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            //单选显示的内容
            roleListFields: {
                rolesName: '角色名称'
            },
            roleList: [],
            agentData: {}
        }
    },
    mounted() {
        //初始化执行查询方法
        this.queryDataHandle(1, 10)
    },
    methods: {
        queryDataHandle(page, rows) {
            let payload = {
                pageNum: page,
                pageSize: rows,
                ...this.queryData
            }
            this.$request("/api/scrm/selectAll/1_0", payload, "POST").then((data) => {
                this.dataSource = data.rows
            })
        },
        //重置方法
        resetQuery() {
            this.queryData = {...initQueryData}
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        //转换方法
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        //列表选中方法
        tableRowChange(val) {
            this.multipleSelection = val;
        },
        allotUserHandle(row) {
            let payload = {
                moduleType: "3"
            }

            this.agentData = {}

            this.agentData = {...row}

            this.$request("/api/roles/getRolesByParams/1_0", payload, "POST").then((data) => {
                this.roleList = data.rows
                this.roleVisible = true
            })
        },
        getRoleData(data) {
            let that = this

            let payload = {
                ...this.agentData,
                rolesId: data.rolesId
            }

            that.$request("/api/scrm/updateScrm/1_0", payload, "POST").then((data) => {
                that.$message({
                    type: 'success',
                    message: '分配成功!'
                });
                this.agentData = {}
                that.roleVisible = false
            })
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.el-card__body .el-select {
    width: 200px;
}

.el-form-item .el-select {
    width: 100%;
}

.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>



